<template>
  <div class="modle banner" v-show="show">
    <div class="tit">
      <b>轮播图</b>
      <span>共（{{ bannerInfo.length }}/3）张</span>
    </div>
    <p class="info">1.最多放三张轮播图</p>
    <p class="info">2.建议尺寸650*330每张/使用本地图片时,≤4M</p>
    <div class="content" v-for="(item, index) in bannerInfo" :key="index">
      <div class="content_left flex-column">
        <el-image class="img" :src="item" fit="fill"></el-image>
        <div class="upload flex-center">
          <div class="btn flex-center" @click="changeUploadType(index)">
            更换
          </div>
        </div>
      </div>
    </div>
    <div class="add flex-middle" v-if="bannerInfo.length < 3">
      <div class="upload" @click="changeUploadType()">
        <div class="upload_box flex-center">
          <i class="el-icon-plus"></i>
        </div>
      </div>
    </div>
    <div class="flex-center">
      <div class="submit flex-center" @click="submit()">保存</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["show"],
  data() {
    return {
      bannerInfo: [], // { goods_id:'',name:'',img:'',subimg:'',ordid:0,}
      upload_inedx: "",
    };
  },
  created() {},
  methods: {
    // 父组件传来的数据
    getData(data) {
      this.bannerInfo = data;
    },
    // 提交
    submit() {
      // 在父组件提交
      this.$emit('submit')
    },
    uploadSuccess(res, index) {
      if (JSON.stringify(index)) {
        this.$set(this.bannerInfo, index, res.data.src);
        // this.bannerInfo[index] = res.data.src;
      } else {
        this.bannerInfo.push(res.data.src);
      }
    },
    uploadErr() {
      this.$message.error("上传失败，请重试");
    },
    // 打开父组件的图片上传方式
    changeUploadType(index) {
      this.upload_inedx = "";
      if (index !== "") {
        this.upload_inedx = index;
      }
      this.$emit("changeUploadType", {
        pid: 1,
        ref: "refBanner",
      });
    },
    // 获取父级返回的图片信息
    getUploadImg(res) {
      let index = this.upload_inedx;
      this.uploadSuccess(res, index);
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  .info {
    margin-top: 14px;
  }
  .content {
    margin-top: 17px;
    background: white;
    padding: 15px 20px;
    display: flex;
    .content_left {
      .img {
        width: 325px;
        height: 160px;
      }
      .btn {
        padding: 6px 28px;
        color: #19b098;
        border: 1px solid #19b098;
        margin-top: 10px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .content_right {
      color: #616161;
      font-size: 14px;
      margin-left: 16px;
      .linkto {
        background: #e1f3f0;
        border: 1px solid #19b098;
        width: 197px;
        height: 34px;
        border-radius: 4px;
        padding: 0 15px;
        box-sizing: border-box;
        margin-top: 20px;
      }
    }
  }
  .add {
    width: 365px;
    height: 160px;
    background: #fff;
    margin-top: 15px;
    position: relative;
    box-sizing: border-box;
    // /deep/.el-upload--picture-card {
    //   left: 40px;
    //   top: 20px;
    //   width: 188px;
    // }

    .upload_box {
      width: 188px;
      height: 110px;
      border: 2px dashed #c4c4c4;
      margin-left: 40px;
    }
  }
}
.submit {
  cursor: pointer;
}
</style>